<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<style>
    /* .box{
        width: 600px;
        height: 600px;
        margin: auto;
        background: bisque;
    }
    .boxtop,.boxconter,.boxbottom{
        width: 600px;
        height: 200px;
    }
    .tleft,.tconter,.tright{
        width: 200px;
        height: 200px;
        float: left;
        text-align: center;
        line-height: 200px;
    }
    .cleft,.cconter,.cright{
        width: 200px;
        height: 200px;
        float: left;
        text-align: center;
        line-height: 200px;
    }
    .bleft,.bconter,.bright{
        width: 200px;
        height: 200px;
        float: left;
        text-align: center;
        line-height: 200px;
    }
    img{
        width: 200px;
        height: 200px;
    } */
    button{
        width: 200px;
        height: 60px;
    }
    ul{
        width: 606px;
    }
    li{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        list-style: none;
        line-height: 200px;
        text-align: center;
        float: left;
    }
    .active{
        background: red;
    }
</style>
<body>
    <!-- <div class="box">
        <div class="boxtop">
            <div class="tleft"><img src="./img/1.png" alt=""></div>
            <div class="tconter"><img src="./img/2.png" alt=""></div>
            <div class="tright"><img src="./img/3.jpg" alt=""></div>
        </div>
        <div class="boxconter">
            <div class="cleft"><img src="./img/4.jpg" alt=""></div>
            <div class="cconter"><img src="./img/7.jpg" alt=""></div>
            <div class="cright"><img src="./img/5.jpg" alt=""></div>
        </div>
        <div class="boxbottom">
            <div class="bleft"><img src="./img/6 (1).jpg" alt=""></div>
            <div class="bconter"><img src="./img/6 (1).png" alt=""></div>
            <div class="bright"><img src="./img/6 (2).jpg" alt=""></div>
        </div>
    </div> -->
    <button>开始抽奖</button>
    <ul>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>杨玉环</li>
        <li>王昭君</li>
        <li>武则天</li>
        <li>程咬金</li>
        <li>夏侯惇</li>
        <li>李元芳</li>
        <li>狄仁杰</li>
    </ul>
</body>
<script>
    // $('.cconter').click(function(){

    // })
    var iNow = 0
    $('button').click(function(){
        var step = parseInt(Math.random()*20+5)
        var timer = setInterval(function(){
            $('li').attr('class','')
            $('li').eq(iNow).attr('class','active')
            iNow++
            step--;
            if(step==0){
                clearInterval(timer)
                // alert('你抽到了：'+$('li[class=active]').html())
            }
            if(iNow==$('li').length){
                iNow=0
            }
        },100
        )
    })

    // var iNow = 0;
	// 	$('button').click(function(){
	// 		var step = parseInt(Math.random()*20+5);
	// 		var timer = setInterval(function(){
	// 			$('li').attr('class','');
	// 			$('li').eq(iNow).attr('class','active');
	// 			iNow++;
	// 			step--;
	// 			if(step==0){
	// 				clearInterval(timer);
	// 				alert('你抽到了:'+$('li[class=active]').html())
	// 			}
	// 			if(iNow==$('li').length){
	// 				iNow=0;
	// 			}
	// 		},100)
	// 	});
</script>
</html>